<template>
  <a-layout-header class="top-nav-header-index">
    <a-row>
      <a-col :span="12">
<!--        <a-icon class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click.native="toggle"></a-icon>-->
<!--        <span>{{ uniqueInfo.name }}</span>-->
      </a-col>
      <a-col :span="12">
        <user-menu></user-menu>
      </a-col>
    </a-row>
  </a-layout-header>
</template>

<script>
import UserMenu from './UserMenu'
import { mapGetters } from 'vuex'
export default {
  name: 'headInfo',
  components: {
    UserMenu
  },
  data () {
    return {
      collapsed: true
    }
  },
  computed: {
    ...mapGetters(['uniqueInfo'])
  },
  methods: {
    toggle () {
      this.collapsed = !this.collapsed
      this.$emit('sliderToggle')
    }
  }
}
</script>

<style lang="less" scoped>
@height: 59px;

.layout {
  .top-nav-header-index {
    z-index: 5;
    background-color: #ffffff;
    color: #000;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    padding: 0 16px;
    .trigger {
      line-height: @height;
      font-size: 20px;
      width: 48px;
      cursor: pointer;
      vertical-align: middle;
      &:hover {
        background: rgba(0, 0, 0, 0.05);
      }
    }
  }

  .ant-layout-header {
    height: @height;
    line-height: @height;
  }
}
</style>
